<script setup lang="ts">
import {
  HomeOutlined,
  GlobalOutlined,
  AppstoreOutlined,
  SettingOutlined,
  ToolOutlined
} from '@ant-design/icons-vue';


import {reactive, h, ref} from "vue";
import {useRouter} from "vue-router";

const router = useRouter()

const current = ref<string[]>([]);

const items = reactive([
  {
    key: 'home',
    icon: () => h(HomeOutlined),
    label: '首页',
    title: '首页',
  },
  {
    key: 'site',
    icon: () => h(GlobalOutlined),
    label: '站点',
    title: '站点',
  },
  {
    key: 'tool',
    icon: () => h(ToolOutlined),
    label: '工具',
    title: '工具',
  },
  {
    key: 'soft',
    icon: () => h(AppstoreOutlined),
    label: '软件',
    title: '软件',
  },
]);
const footitems = reactive([
  {
    key: 'setting',
    icon: () => h(SettingOutlined),
    label: '设置',
    title: '设置',
  }
]);

function handleClick(info){
  current.value = [info.key];
  router.push({name:info.key})
}

</script>

<template>
  <a-row :gutter="[16,16]" justify="space-between" style="height: 100%;" class="side-box">
    <a-col :span="24">
      <div class="logo" onmousedown="aardio.hitCaption()">
        <img src="public/icons/icon.png" style="width: 80px;">
      </div>
      <div class="menu">
        <a-menu
            :inlineIndent="60"
            v-model:selectedKeys="current"
            style="background: unset;color: #ffffff"
            mode="inline"
            @click="handleClick"
            :items="items"
        ></a-menu>
      </div>
    </a-col>

    <a-col :span="24" align="bottom">
      <div class="foot" style="height:100%;box-sizing:border-box;padding-bottom:20px;display: flex;align-items:end">
        <a-menu
            :inlineIndent="60"
            v-model:selectedKeys="current"
            @click="handleClick"
            style="background: unset;color: #ffffff"
            mode="inline"
            :items="footitems"
        ></a-menu>
      </div>
    </a-col>
  </a-row>


</template>

<style lang="less" scoped>
.logo{
  padding-top: 30px;
  text-align: center;
}
.menu{
  ::v-deep(.ant-menu-title-content){
    font-size: 15px;
  }
}
.side-box{
  -webkit-app-region: drag;
  .ant-menu{
    -webkit-app-region: no-drag;
  }
}
</style>
